<script src="./modules/login/login.js"></script>
<link rel="stylesheet" href="./modules/login/login.css">

<canvas id="myCanvas" style="position: absolute;width: 100%;height: 100%;"></canvas>
<div id="login-container">

    <div class="row">
        <div class="col-12">
                <h1 id="login-logo">LogMan</h1>
        </div>
    </div>
    <div class="divider"></div>
    <div class="row">
        <div class="col-12">
                <h4 id="login-title">一个优秀的网络日志分析系统</h4>
        </div>
    </div>
    <div id="login-main-container">
        <!-- switch-btn -->
        <div class="row">
            <div class="col-4 offset-md-2" >
                    <a href="#" class="form-link normal" id="toSignup" onclick="change(0)">注册</a>
            </div>
            <div class="col-4">
                    <a href="#" class="form-link active" id="toSignin" onclick="change(1)">登录</a>
            </div>
        </div>
        <!-- signin-form -->
        <form class="show" id="signinForm" method="post" action="javascript:void(0)">
            <div class="row drop-bottom-border">
                <input type="text" name="user_contact" placeholder="手机号或邮箱" required="required" maxlength="30">
            </div>
            <div class="row add-all-border">
                <input type="password" name="user_password" placeholder="密码" required="required" maxlength="15">
            </div>
            <button type='submit' class="btn" id='login-btn' onclick="login()">登录</button>

        </form>

        <!-- signup-form -->
        <form class="hidden" id="signupForm" method="post" action="javascript:void(0)">
            <div class="row drop-bottom-border">
                <input type="text" name="user_name" placeholder="姓名(您的真实姓名)" maxlength="15" required="required" pattern="[\u4e00-\u9fa5]{1,10}">
            </div>
            <div class="row drop-bottom-border">
                <input type="text" name="user_phone" placeholder="手机号(大陆11位号码)" maxlength="11" required="required" pattern="[0-9]{11}">
            </div>
            <div class="row add-all-border">
                <input type="password" name="user_password" placeholder="密码（6-15位）" maxlength="15" required="required" pattern="*{6,15}">
            </div>
            <button type='submit' class="btn" id='regist-btn'>加入我们</button>

            <div class="row">
                <p>点击「注册」按钮，即代表你同意
                    <span style="color:#698ebf">《信息安全实验室管理协议》</span>
                </p>
            </div>
        </form>

    </div>

</div>

<script src="./modules/login/background.js"></script>